<template>
    <div class="project-name">
        <titleBar title="项目名称" rightText="完成" :cb="cb" />    
        <input v-on:click="focu" autofocus ref="projectNameInput" placeholder="请输入项目名称" class="input" v-model="inputValue" />
    </div>
</template>
<script>
import titleBar from '@/components/title_bar/index.vue'
import {mapMutations, mapState} from 'vuex'
export default {
    data(){
        return {
            inputValue: ''
        }
    },
    computed: {
        ...mapState([
            'payOrderProjectName'
        ])
    },
    components: {
        titleBar,
    },
    created(){
        this.inputValue = this.payOrderProjectName
    },
    mounted(){
        // console.log(this.$refs.projectNameInput)
        this.focu()
        setTimeout(() => this.focu(), 1e3)
    },
    methods:{
        focu(){
            this.$refs.projectNameInput.focus()
        },
        ...mapMutations([
            'UPDATE',
        ]),
        cb(){
            let value = this.inputValue
            if(!value){
                return this.$toast('请输入内容')
            }if(value.length >= 12){
                return this.$toast('文字不能大于12个字符')
            }
            this.UPDATE(['payOrderProjectName', value])
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="scss" scoped>
.project-name{
    .input{
        width: 7.02rem;
        height: 1rem;
        // line-height: 1rem;
        background-color: #fff;
        border-radius: .1rem;
        border-width: 0px;
        margin: .2rem 0rem 0rem .24rem;
        text-indent: .24rem;
        font-size: .28rem;
    }
}
</style>
